<template>
  <el-row :gutter="40">
    <el-col :lg="24">
      <el-form
        :inline="true"
        :model="queryParams"
        label-position="left"
        size="small"
        class="filter-form-inline"
      >
        <el-row
          :gutter="40"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col
            :lg="6"
            :xs="8"
          >
            <el-form-item
              label="状态"
              style="width: 100%"
            >
              <el-select
                v-model="queryParams.finishStatus"
                clearable
                style="width: 100%"
                placeholder="请选择状态"
                @change="handleSearch"
              >
                <el-option
                  v-for="item in qualificationStatusData.filter(p => p.value!=='3')"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="8"
          >
            <el-form-item
              label="企业所在地"
              style="width: 100%"
            >
              <el-cascader
                v-model="queryParams.area"
                :popper-append-to-body="false"
                style="width:100%"
                placeholder="请选择地区"
                :options="citys"
                clearable
                :props="{ value:'regionCode',label:'regionName', expandTrigger: 'hover' }"
                @change="handlAreas"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="8"
          >
            <el-form-item
              label="关键字"
              style="width: 100%"
            >
              <el-input
                v-model="queryParams.keyWord"
                clearable
                placeholder="输入代理商名称、统一社会信用代码、详细地址"
                @clear="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="4"
            :xs="4"
          >
            <el-form-item style="width: 100%">
              <el-button
                class="border-btn"
                @click="handlReset"
              >重置
              </el-button>
              <el-button
                type="primary"
                class="main-btn"
                @click="handleSearch"
              >搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
  <table-view
    :data="tableData"
    header-cell-class-name="table-header"
    size="medium"
    border
    :cell-style="cellStyle"
    @sort-change="handlSort"
    @row-click="aloneClick"
  >
    <el-table-column
      prop="agentNumber"
      label="代理商编号"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="agentName"
      label="代理商名称"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="creditCode"
      label="统一社会信用代码"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="region"
      label="企业所在地区"
      header-align="center"
      :show-overflow-tooltip="true"
    >
      <template #default="{row}">
        {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="详细地址"
      header-align="center"
      :show-overflow-tooltip="true"
    />
    <!--
    <el-table-column
      prop="createdAt"
      label="创建时间"
      sortable="custom"
      align="center"
      :show-overflow-tooltip="true"
    >
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
      </template>
    </el-table-column>
    -->
    <el-table-column
      prop="finishStatus"
      label="状态"
      align="center"
      :show-overflow-tooltip="true"
      fixed="right"
    >
      <template #default="{row}">
        <div style="line-height: 20px">{{ getLabel('qualification_status', row.finishStatus) }}</div>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="queryParams.page"
    v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />
</template>

<script>
import { inject, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import areas from '@/utils/area.js'
import { crmStore } from '@CRM/store'

export default {
  name: 'AgentList',
  setup() {
    const api = inject('api')
    const router = useRouter()
    var data = reactive({
      queryParams: {
        finishStatus: '',
        keyWord: '',
        pageSize: 20,
        page: 1,
        area: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        from: '3',
        agentType: 'agent',
      },
      citys: areas,
      tableData: [],
      total: 0,
      qualificationStatusData:
        crmStore.getters['dictionary/getDictionary']['qualification_status'] ||
        [],
    })

    const handlAreas = (val) => {
      if (val && val.length) {
        data.queryParams.provinceCode = val[0]
        data.queryParams.cityCode = val[1]
        data.queryParams.areaCode = val[2]
      } else {
        data.queryParams.provinceCode = ''
        data.queryParams.cityCode = ''
        data.queryParams.areaCode = ''
      }
      handleSearch()
    }

    // 获取列表
    const handlList = () => {
      api.internalControl
        .INTERNAL_CONTROL_AGENT_FILE_LIST(data.queryParams)
        .then((res) => {
          if (res.code === 0) {
            data.tableData = res.data.list || []
            data.total = res.data.total
          }
        })
    }

    const handlReset = () => {
      data.queryParams = {
        finishStatus: '',
        keyWord: '',
        area: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        from: '3',
        agentType: 'agent',
        pageSize: 20,
        page: 1,
      }
      handlList()
    }

    // 搜索
    const handleSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作' || column.label === '查看文件') return
      router.push({
        name: 'customerAgentDetail',
        query: { id: row.id },
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === '创建时间') {
          switch (row.order) {
            case 'ascending':
              data.queryParams.createdSort = 'asc'
              break
            case 'descending':
              data.queryParams.createdSort = 'desc'
              break
          }
        }
      }
      handlList()
    }

    //* **************************************
    onMounted((_) => {
      handlList()
    })
    //* **************************************
    return {
      ...toRefs(data),
      handlReset,
      handleSearch,
      aloneClick,
      cellStyle,
      handlList,
      handlSort,
      handlAreas,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
